<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="container">
			
			<!-- <div class="header-item" id="head">
				<div class="header"><img src="img/mark.png" alt="load fail" title="where">吃什么</div>
				<div class="header"><img src="img/mark.png" alt="load fail" title="where">玩什么</div>
				<div class="header"><img src="img/mark.png" alt="load fail" title="where">看什么</div>
			</div> -->
			<header-item :items="items"></header-item>
			<div class="check-box" id="where">
				<div class="place-check">place1</div>
				<div class="place-check">place1</div>
				<div class="place-check">place1</div>
			</div>
			<div id="big-show-way">
				<div class="choose" id="show-random-item">
				<ul class="choose-item">
					<li><img src="img/soul.jpg" >one</li>
					<li><img src="img/soul.jpg" >one</li>
					<li><img src="img/soul.jpg" >one</li>
					<li><img src="img/soul.jpg" >one</li>
				</ul>
				</div>
				<div class="choose" style="display: none;">
				<ul class="choose-item">
					<li><img src="img/soul.jpg" >one</li>
					<li><img src="img/soul.jpg" >one</li>
					<li><img src="img/soul.jpg" >one</li>
					<li><img src="img/soul.jpg" >one</li>
				</ul>
				</div>
				<div class="choose" style="display: none;">
				<ul class="choose-item" >
					<li><img src="img/soul.jpg" >one</li>
					<li><img src="img/soul.jpg" >one</li>
					<li><img src="img/soul.jpg" >one</li>
					<li><img src="img/soul.jpg" >one</li>
				</ul>
				</div>
			</div>
			<div class="random-choose">
				<div class="random-button">
					我来帮你选
				</div>
			</div>
			<div class="answer">
				<img src="img/soul.jpg" alt="load fail" title="where">
			</div>
		</div>
		<script>
			Vue.component('header-item',{
				template:`
				<div class="header-item">
					<div class="header" v-for="item in items" ><img src="{{item.imgSrc}}" alt="load fail" title="{{item.name}}">吃什么</div>
				</div>
				`,
				props:['items']				
				}
			)
			var container=new Vue({
				el:container,
				data:{
					items:[
						{
							imgSrc:'img/mark.png',
							name:"吃什么"
						},
						{
							imgSrc:'img/mark.png',
							name:"玩什么"
						},
						{
							imgSrc:'img/mark.png',
							name:"看什么"
						}
					]
					},
					}
			)
		</script>
	</body>
</html>
